<template>
  <view>
    <view v-for="(item, index) of formatList" :key="index">
      <view class="card tn-padding-sm tn-margin-sm">
        <view @click="edit(item,index)">
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">故障事故车型:</text>
            <text class="value tn-text-lg">{{ item.dcCarType }}</text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">吊车类型(65吨以上):</text>
            <text class="value  tn-text-lg">{{ item.dcType }}</text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">收费标准:</text>
            <text class="value  tn-text-lg">{{ item.dcChargingStandard }}</text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">上浮20%:</text>
            <text class="value  tn-text-lg">{{ item.dcIsUp }}</text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">小计:</text>
            <text class="value  tn-text-lg">{{ item.dcSubtotal }}</text>
          </view>
        </view>
        <view class="tn-flex tn-flex-direction-row-reverse tn-margin-top-sm">
          <tn-button style="margin-left: 10px;" @click="dcDelete(index)" backgroundColor="tn-bg-red"
                     fontColor="tn-color-white">删除
          </tn-button>
        </view>
      </view>
    </view>

    <view class="tn-flex tn-flex-row-center tn-text-bold tn-text-lg label">
      <text class="tn-form-item">小计:</text>
      <text class="tn-form-item"> {{ listTotal }}</text>
    </view>

    <view class="tn-flex tn-flex-row-center tn-padding-xl" v-if="formatList.length<2">
      <tn-button @click="add" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">添加
      </tn-button>
    </view>


    <tn-popup v-model="popShow" mode="bottom">
      <tn-form class="tn-padding-sm tn-margin-sm" :model="form" ref="form" :labelWidth="220"
               :errorType="['message', 'toast']">
        <tn-form-item label="故障事故车型：" prop="dcCarType">
          <tn-input type="select" :selectOpen="chexingdiaocheSelectShow"
                    @click="chexingdiaocheSelectShow = true"
                    v-model="form.dcCarType"/>
        </tn-form-item>
        <tn-form-item label="吊车类型(65吨以上)：" prop="dcType">
          <tn-input type="select" :selectOpen="diaocheSelectShow"
                    @click="diaocheSelectShow = true"
                    v-model="form.dcType"/>
        </tn-form-item>
        <tn-form-item label="收费标准：" prop="dcChargingStandard">
          <tn-input v-model="form.dcChargingStandard"/>
          <text class="tn-color-gray">元/车次</text>
        </tn-form-item>
        <tn-form-item label="上浮20%：" prop="dcIsUp">
          <tn-radio-group v-model="form.dcIsUp">
            <tn-radio v-for="(item, index) in isUpLst" :key="index" :name="item.name">
              {{ item.name }}
            </tn-radio>
          </tn-radio-group>
        </tn-form-item>
        <tn-form-item label="小计：" prop="dcSubtotal">
          <tn-input type="number" v-model="form.dcSubtotal"/>
        </tn-form-item>
      </tn-form>
      <view class="tn-flex tn-flex-row-center tn-padding-xl">
        <tn-button @click="save" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
        </tn-button>
      </view>

    </tn-popup>

    <!-- 车型select -->
    <view v-show="chexingdiaocheSelectShow">
      <tn-select v-model="chexingdiaocheSelectShow" mode="single" :list="chexingList"
                 @confirm="chexingdiaocheConfirm"></tn-select>
    </view>
    <!-- 吊车select -->
    <view v-show="diaocheSelectShow">
      <tn-select v-model="diaocheSelectShow" mode="single" :list="diaocheList"
                 @confirm="diaocheConfirm"></tn-select>
    </view>
  </view>

</template>
<script>
import {chexing_dc, diaoche, isUpLst} from "@/static/mock/diaoche";
import {calc} from "a-calc/es";
import {toast} from "@/utils/common";

export default {
  name: "diaocheCom",
  watch: {
    // 吊车收费 - 收费标准
    'form.dcChargingStandard'() {
      let total = 0;

      total = calc(`
				${this.form.dcChargingStandard || 0}
				* (${this.form.dcIsUp === '是' ? 1.2 : 1})
			`)
      this.form.dcSubtotal = total;
    },
    // 吊车收费 - 上浮
    'form.dcIsUp'() {
      let total = 0;

      total = calc(`
				${this.form.dcChargingStandard || 0}
				* (${this.form.dcIsUp === '是' ? 1.2 : 1})
			`)
      this.form.dcSubtotal = total;
    },
    "formatList": {
      handler(val) {
        let total = 0;
        val.forEach(item => {
          total += +item.dcSubtotal
        })
        this.listTotal = total
        this.$emit('update:total', total)
      },
      // deep: true
    }
  },
  data() {
    return {
      chexingList: chexing_dc,
      isUpLst,
      popShow: false,


      formatList: [],

      viewType: 'add',
      listTotal: 0,
      form: {
        dcCarType: '',
        dcType: '',
        dcChargingStandard: '',
        dcIsUp: '',
        dcSubtotal: ''
      },


      chexingdiaocheSelectShow: false,
      diaocheSelectShow: false,
      diaocheList: diaoche,
    }
  },
  methods: {
    add() {
      this.viewType = 'add'
      this.popShow = true;
      this.form = {
        dcCarType: '',
        dcType: '',
        dcChargingStandard: '',
        dcIsUp: '',
        dcSubtotal: ''
      }
    },
    edit(item,index) {
      this.viewType = 'edit'
      this.popShow = true;
      this.form = {...item,index};
    },
    save() {
      if(!(+this.form.dcSubtotal)){
        return toast('小计不能为0！')
      }
      if(this.viewType === 'add'){
        this.formatList.push(this.form)
        this.$emit('collapseInit')
      }else{
        this.formatList[this.form.index] = {...this.form};
        this.formatList = [...this.formatList]
      }
      this.popShow = false
    },
    dcDelete(index) {
      this.formatList.splice(index, 1)
      this.$emit('collapseInit')
    },
    dcCancel() {
      if (!+this.form.dcSubtotal) {
        this.form.dcCarType = ""
        this.form.dcType = ""
        this.form.dcIsUp = ""
        this.form.dcChargingStandard = ""
      }
    },
    // 吊车
    chexingdiaocheConfirm(val) {
      const obj = chexing_dc[val[0].value];
      this.form.dcCarType = obj.label;
      this.form.dcChargingStandard = obj.basis;
      this.form.dcType = ''

      this.form.dcIsUp = '否'
    },

    // 大型吊车
    diaocheConfirm(val) {
      const obj = diaoche[val[0].value];
      this.form.dcType = obj.label;
      this.form.dcChargingStandard = obj.basis;
      this.form.dcCarType = ''

      this.form.dcIsUp = '否'
    },
  },
}
</script>
<style scoped lang="scss">
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}

.label {
  font-weight: 700;
  line-height: 32px;
}
</style>
